@extends('layout')
@section('content')
<style> 
.modal-header-danger {
  color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color:   #e30022;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

</style>
<div class="panel panel-danger">
      <div class="panel-heading">
      <h3><left><a href = "#"><a class="glyphicon glyphicon-registration-mark text-danger"></a></left>Agregar Nuevo Tipo de raza</h3>
      </div>
    </div>
        <div class="input-group"> <span class="input-group-addon "><span class="glyphicon glyphicon-search"></span> Buscar</span>
        <input name="filter" id="filter" type="text" class="form-control" placeholder="¿Qué desea buscar?"></div>

        <div class="panel-body">
            <table id="tipos_insumos" class="table table-striped table-hover display" >
				<thead>
					<tr>
						<th>Id</th>
						<th>Raza</th>
						<th>Descripción</th>
						<th>Acciones</th>
					</tr>
				</thead>
				<tbody class="searchable">
					@foreach($razas as $raza)
						<tr>
							<td>{{ $raza->id }}</td>
							<td>{{ $raza->raza }}</td>
							<td>{{ $raza->descripcion }}</td>
							<td>
                 <div class="btn-group">
                     <a href="{{route('razas.show', $raza->id )}}" data-target="#mostrar" data-toggle="modal" class="btn btn-danger">Ver</a>
                    <a href="#" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    <li><a href="{{route('razas.edit', $raza->id )}}" data-target="#editar" data-toggle="modal">Editar</a></li>
                     <li>{{ Form::open(array('url' => 'razas/'.$raza->id, 'method'=> 'delete')) }}
                      {{ Form::submit('Eliminar',  array('class' => "btn btn-default"))}}
                      {{ Form::close() }}</li>
                    </ul>
                </div> 
							</td>
						</tr>
					@endforeach
				</tbody>
			</table>
			<button class="btn btn-primary" data-toggle="modal" data-target="#crear"><span class="glyphicon glyphicon-plus"></span> Agregar Raza</button>
  		</div>
  	</div>
@stop
@section('modal')
  	 @if(Session::has('message'))
        
        <div class="alert alert-{{ Session::get('class') }}"><span class="glyphicon glyphicon-ok-sign"></span>{{ Session::get('message')}}</div>
    @endif
    <div class="modal fade" id="crear" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header modal-header-danger">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h1><i class="glyphicon glyphicon-check"></i> Crear Tipo Raza</h1>
      </div>
      	<div class="modal-body">
       		    <form method="post" action="razas">
				<p><input type="text" name="raza" placeholder="Raza" class="form-control" required></p>
				<p><textarea name="descripcion" placeholder="Descripción" rows="3" class="form-control" required></textarea></p>
      </div>
      <div class="modal-footer">
      	<input type="submit" value="Guardar" class="btn btn-success"><button class="btn btn-default" data-dismiss="modal">Regresar</button>
		</form>
      </div>
    </div>
  </div>
</div>
 <!--Fin Modal crear -->
 <!--Modal editar -->
<div class="modal fade" id="editar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header modal-header-danger ">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h1><i class="glyphicon glyphicon-pencil"></i> Editar Tipo Raza</h1>
      </div>
      	<div class="modal-body">
       		    <iframe src="/razas/edit/{{ $raza->id }}" frameborder="0" style="zoom:0.60" height="500" width="550"></iframe>
      </div>
      <div class="modal-footer">
      	<input type="submit" value="Guardar" class="btn btn-success"><button class="btn btn-default" data-dismiss="modal">Regresar</button>
		</form>
      </div>
    </div>
  </div>
</div>
 <!--Fin Modal editar -->
 <!--Modal mostrar -->
<div class="modal fade" id="mostrar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header modal-header-danger">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h1><i class="glyphicon glyphicon-list"></i>Informacion de la Raza</h1>
      </div>
      	<div class="modal-body">
       		    <iframe src="/razas/show/{{ $raza->id }}" frameborder="0" style="zoom:0.60" height="500" width="550"></iframe>
      </div>
      <div class="modal-footer">
      	<input type="submit" value="Guardar" class="btn btn-success"><button class="btn btn-default" data-dismiss="modal">Regresar</button>
		</form>
      </div>
    </div>
  </div>
</div>
 <!--Fin Modal mostrar -->
<script type="text/javascript">
    $(document).ready(function() {
    $('#razas').dataTable({
    	"dom": 'Rlfrtip',
        "language": {
            "sProcessing":     "Procesando...",
    		"sLengthMenu":     "Mostrar _MENU_ registros",
    		"sZeroRecords":    "No se encontraron resultados",
    		"sEmptyTable":     "Ningún dato disponible en esta tabla",
    		"sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
		    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
		    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
		    "sInfoPostFix":    "",
		    "sSearch":         "Buscar:",
		    "sUrl":            "",
		    "sInfoThousands":  ",",
		    "sLoadingRecords": "Cargando...",
		    "oPaginate": {
		        "sFirst":    "Primero",
		        "sLast":     "Último",
		        "sNext":     "Siguiente",
		        "sPrevious": "Anterior"
    					},
        			}
    } );
    var table = $('#razas').DataTable();
 
	$('#filter').on( 'keyup', function () {
    table.search( this.value ).draw();
	} );
});
  
</script>
@stop